<style lang="scss">
  .common-modal {
    .el-dialog__header {
      background: rgb(44, 62, 80) !important;
      padding: 0 !important;
      margin: 0 !important;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .el-dialog__body {
      padding: 20px 20px 0 !important;
    }
    .el-dialog__footer {
      text-align: center !important;
    }
  }
  .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(44, 62, 80);
    padding: 8px 20px;
    width: 100%;
    .header_left {
      color: #fff;
      font-size: 14px;
    }
    .close {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
  }
</style>

<template>
  <el-dialog
    v-model="show"
    :width="width"
    append-to-body
    destroy-on-close
    custom-class="common-modal"
    @close="beforeClose"
    :close-on-click-modal="false"
    @open="handleOpen"
    :show-close="false"
    v-bind="attrs"
  >
    <template #title>
      <div class="dialog-header">
        <div class="header_left">{{ title }}</div>
        <img @click="handleClose" src="@/assets/layout/close.png" alt="" class="close">
      </div>
    </template>
    <slot/>
    <template #footer >
      <span class="dialog-footer" v-if="showFooter">
        <el-button type="primary" @click="handleSure">{{ confirmText }}</el-button>
        <el-button @click="handleCancel">{{ cancelText }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
/**
 * @description 二次封装 element-plus Dialog 组件 适应项目需要
 */
export default {
  inheritAttrs: false,
};
</script>
<script setup>
  import { useAttrs } from 'vue'
  const attrs = useAttrs();
  defineProps({
    width: {
      type: [Number, String],
      default: '520px'
    },
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    showFooter: {
      type: Boolean,
      default: true
    }
  })
  const emits = defineEmits(['update:show', 'sure', 'cancel', 'before-close', 'open'])
  // 关闭之前
  const beforeClose = () => emits('before-close')
  // 关闭弹窗
  const handleClose = () => emits('update:show', false)
  // 确定
  const handleSure = () => emits('sure')
  // 取消
  const handleCancel = () => emits('cancel')
  // 打开弹窗
  const handleOpen = () => emits('open')

  defineExpose({
    close: handleClose
  })
</script>